<template>
  <div class="forum-index">
    <div class="my-headbox">
      <div class="left-part">
        <div class="left-arrow" @click="$router.push({name: 'home'})"></div>
      </div>
      <tab active-color="#D88C82" :line-width="1" custom-bar-width="60px" class='topTab'>
        <tab-item v-for="(item,i) in routeList" :key="i" :selected="$route.path===item.route" @on-item-click="$router.replace(item.route)">{{item.title}}</tab-item>
      </tab>
      <div class="right-part">
        <i class="icon-gengduo2" @click="showTwoAction=true"></i>
      </div>
    </div>
    <router-view></router-view>
    <actionsheet v-model="showTwoAction"
      :menus="cacelList"
      show-cancel
      @on-click-menu="click">
    </actionsheet>
  </div>
</template>
<script>
import { Vue, Component } from 'vue-property-decorator';
import { Tab, TabItem, Actionsheet } from 'vux';

@Component({
  components: { Tab, TabItem, Actionsheet }
})
export default class ForumIndex extends Vue {
  showTwoAction = false
  routeList = [
    { title: '热门', route: '/forum/square' },
    { title: '关注', route: '/forum/watch' }
  ]
  cacelList = {
  	0: '搜索',
  	1: '新建帖子',
  	2: '发布二手'
  }
  created () {
    localStorage.setItem('type', 0)
  }
  click (key) {
    if (key === '0') {
      this.$router.push({
        path: '/search',
        query: {
          id: 0
        }
      })
    }
    if (key === '1') {
      this.$router.push('/publishpost')
    }
    if (key === '2') {
      this.$router.push('/publishsecond')
    }
  }
}
</script>
<style lang="less">
  .forum-index {
    padding-top: 50px;
    .weui-cell::before {
      border-top: unset;
    }
    .vux-header .vux-header-right {
      top: 10px;
      color: #ffffff;
    }

    .my-headbox {
      background: white;
      position: fixed;
      z-index: 1;
      width: 100%;
      top: 0;
      height: 46px;
      display: flex;

      .left-part {
        width: 18%;
        margin-left: 1%;
        display: inline-block;
        margin-top: 5px;
        position:relative;
        i {
          font-size: 24px !important;
        }
     	.left-arrow{
		    	position: absolute;
			    width: 30px;
			    height: 30px;
			    top: 4px;
			    left: 10px;
      }
			.left-arrow:before {
			    content: "";
			    position: absolute;
			    width: 12px;
			    height: 12px;
			    border: 1px solid #ccc;
			    border-width: 1px 0 0 1px;
			    -webkit-transform: rotate(315deg);
			    transform: rotate(315deg);
			    top: 8px;
			    left: 7px;
			}

      }
      .vux-tab-bar-inner{
        display:none !important;
      }
      .right-part {
        width: 18%;
        text-align: right;
        display: inline-block;
        margin-top: 5px;
        i {
          font-size: 24px !important;
          color:#9A9B9B;
        }
      }

      .vux-tab-wrap{
        width: 60%;
        display: inline-block;
      }
    }

    .vux-tab .vux-tab-item {
      background: unset;
      font-size: 16px;
      // &.vux-tab-selected{
    	// 	color:#4C0D20;
    	// }
    }
    .vux-tab-bar-inner{
    		background-color:#C57746 !important;
    }
  }
</style>
